<template>
    <div>
     <h1>食谱信息的添加功能</h1>
     <table>
        <tr>
            <td>标题</td>
            <td><input type="text" v-model="data.sname">
                <a v-if="!data.sname" style="color: red;">*</a>
            </td>
           
        </tr>
        <tr>
            <td>图片</td>
            <td><input type="file" @change="upload">
                <img  style="height: 100px; width: 100px;" :src="'https://localhost:7076'+data.simg">
                <a v-if="!data.simg" style="color: red;">*</a>
            </td>
           
        </tr>
       
        <tr>
            <td>类型</td>
            <select v-model="data.typeid">
             <option value="0">请选择</option>
             <option v-for="s in types" :value="s.typeid" >{{s.typename}}</option>
            </select>
            <a v-if="!data.typeid" style="color: red;">*</a>
        </tr>
       
        <tr>
            <td></td>
            <td><input type="button" value="提交" @click="Add"></td>
        </tr>
     </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { onMounted } from 'vue';

const router=useRouter();


onMounted(()=>
{
    getdate();
})

const data=ref({
    
    "sid": 0,
  "sname": "",
  "simg": "",
  "typeid": 0

})

const types=ref([{

      "typeid": 0,
    "typename": ""
}])


const upload=(a:any)=>
{
var f=a.target.files[0]
var fd=new FormData();
fd.append("file",f);
axios.post("https://localhost:7076/api/upload/upload",fd).then(res=>
{
           data.value.simg=res.data;
}
)
}




const getdate=()=>
{
    axios.get("https://localhost:7076/api/type/xia").then(res=>
        {
            types.value=res.data;
        }
    )
}


const Add=()=>
{

if(data.value.sname=="")
{
    alert("食谱标题不能为空");
    return;
}
if(data.value.simg.length==0)
{
    alert("食谱图片不能为空");
    return;
}
if(data.value.typeid==0)
{
    alert("食谱类型不能为空");
    return;
}


    axios.post("https://localhost:7076/api/shipu/Add",data.value).then(res=>
        {
            if(res.data>0)
        {
            alert("添加成功");
            router.push({path:"/sApp"});
        }
        else{
            alert("添加失败");
            return
        }
        }
    )
}

</script>

<style scoped>

</style>